<template>
  <div class="log-rule">
    <div class="log-rule_main">
      <div class="log-rule_title">
        <span class="text"><i class="el-icon-collection"></i>规则</span>
        <el-button class="elBtn addEvent" type="text" @click="addEvent"><i class="el-icon-circle-plus-outline"></i>添加事件</el-button>
      </div>
      <div class="log-rule_content">
        <ul>
          <li v-if="eventNum > 1">
            <div class="log-rule_event" v-if="!isUpdate">
              <i class="el-icon-connection"></i><span class="text">关联</span>
              <div class="log-rule_event_btn">
                <el-button class="elBtn" type="text" ><i class="el-icon-circle-plus-outline"></i></el-button>
              </div>
            </div>
          </li>
          <li v-for="(item, index) in eventNum" :key="index">
            <div class="log-rule_event" v-if="!isUpdate">
              <i class="iconfont iconshaixuan"></i><span class="text">{{name + (index+1)}}</span>
              <div class="log-rule_event_btn">
                <el-button class="elBtn" type="text" title="修改事件名称" @click="updateEventName(index+1)"><i class="el-icon-edit"></i></el-button>
                <el-popconfirm
                    placement="top"
                    title="确定要删除？"
                    @onConfirm="deleteEvent">
                    <el-button
                      type="text"
                      slot="reference">
                      <i class="el-icon-delete"></i>
                    </el-button>
                </el-popconfirm>
              </div>
            </div>
            <div class="log-rule_event_adit" v-if="isUpdate">
              <el-form :inline="true" class="demo-form-inline">
                <i class="iconfont iconshaixuan"></i>
                <el-form-item label="">
                  <el-input size="mini" v-model="updateName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="warning" size="mini" @click="saveEventName">确认</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button size="mini" @click="isUpdate = false">取消</el-button>
                </el-form-item>
              </el-form>
            </div>
            <log-rule-tree
              :data="data"
              :dropData="dropData"
              :filedData="filedData"
              />
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
/* eslint-disable */
import LogRuleTree from '@/components/log-rule-tree'
import { selectLogicData } from '@/api/analysis/intelligent'
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    },
    dropData: {
      type: Array,
      default: () => []
    },
    filedData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      name: '事件',
      updateName: '事件1',
      isUpdate: false,
      eventNum: 1,
      currentTreeData: {},
      editData: {},
      dialogFormVisible: false,
      formInline: {
        left: '1',
        name: '11',
        right: ''
      },
      inputEdit: false
    }
  },
  components: {
    LogRuleTree
  },
  methods: {
    // 添加事件
    addEvent() {
      this.eventNum += 1
    },
    // 删除事件
    deleteEvent() {
      this.eventNum -= 1
    },
    // 修改事件名称
    updateEventName() {
      this.isUpdate = true
      this.updateName = this.name
    },
    // 保存事件名称修改
    saveEventName(index) {
      this.name = this.updateName
      this.isUpdate = false
    }
  }
}
</script>

<style lang="scss" scoped>
.log-rule {
  padding-bottom: 10px;
  border: 1px dashed #999;
  span.text {
    margin-right: 20px;
  }
  i{
    margin: 0 5px;
  }
  .log-rule_title{
    &:hover {
      background: #f5f7fa;
      .addEvent {
        opacity: 1;
      }
    }
    .addEvent {
      opacity: 0;
      transition: all 0.5s ease;
    }
  }
  .log-rule_content {
    .log-rule_event {
      &:hover {
        background: #f5f7fa;
        .log-rule_event_btn {
          opacity: 1;
        }
      }
      .log-rule_event_btn{
        display: inline-block;
        opacity: 0;
        transition: all 0.5s ease;
      }
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    padding-right: 8px;
  }
  .brother-showing {
    i {
      width: 16px;
    }
    .iconfont {
      font-size: 16px;
      vertical-align: baseline;
    }
  }
  .active {
    display: none;
  }
  .action:hover .active {
    display: block;
  }
}
.el-button+.el-button {
  margin: 0;
}
</style>
